<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Performance</title>
    <script src="../dist/zrender.js"></script>
    <!-- <script src="https://cdn.jsdelivr.net/npm/zrender@4.2.0/dist/zrender.js"></script> -->

    <script src="data/text.js"></script>
</head>
<body>
    <div id="main" style="width:100%;height:400px;border:1px solid green"></div>
    <div>
        <input id="round" value="10"/>次
        <input id="count" value="10000"/>个图形
        <select id='shape'>
            <option value='circle'>circle</option>
            <option value='sector'>sector</option>
            <option value='ring'>ring</option>
            <option value='ellipse'>ellipse</option>
            <option value='rect'>rect</option>
            <option value='text'>text</option>
            <option value='heart'>heart</option>
            <option value='droplet'>droplet</option>
            <option value='line'>line</option>
            <option value='image'>image</option>
            <option value='star'>star</option>
            <option value='isogon'>isogon</option>
        </select>
        <button id='run'>start</button>
        <button id='auto-run'>auto start</button>
    </div>
    <div id="res">loading</div>
    <script type="text/javascript">
        // 初始化zrender
        zr = zrender.init(document.getElementById("main"));
        width = zr.getWidth();
        height = zr.getHeight();
        isRunning = false;
        document.getElementById('res').innerHTML = 'ready!<br/>';
        document.getElementById('run').onclick = start;
        document.getElementById('auto-run').onclick = autoStart;

        var ElClasses = {
            circle: zrender.Circle,
            sector: zrender.Sector,
            ring: zrender.Ring,
            rect: zrender.Rect,
            text: zrender.Text,
            line: zrender.Line,
            image: zrender.Image
        };

        var shapeMakers = {
            circle() {
                return {
                    cx: Math.round(Math.random() * width),
                    cy: Math.round(Math.random() * height),
                    r: Math.random() * 30
                }
            },
            sector() {
                return {
                    cx: Math.round(Math.random() * width),
                    cy: Math.round(Math.random() * height),
                    r0: Math.round(Math.random() * 10),
                    r: Math.random() * 30,
                    startAngle : Math.round(Math.random() * 30),
                    endAngle: Math.round(Math.random() * 180) + 30
                }
            },
            ring() {
                return {
                    cx: Math.round(Math.random() * width),
                    cy: Math.round(Math.random() * height),
                    r0: Math.round(Math.random() * 10),
                    r: Math.random() * 30,
                }
            },
            rect() {
                return {
                    x: Math.round(Math.random() * width),
                    y: Math.round(Math.random() * height),
                    width: Math.round(Math.random() * 10),
                    height: Math.round(Math.random() * 5)
                }
            },
            line() {
                return {
                    x1: Math.round(Math.random() * width),
                    y1: Math.round(Math.random() * height),
                    x2: Math.round(Math.random() * width),
                    y2: Math.round(Math.random() * height)
                }
            }
        }

        var styleMakers = {
            image() {
                return {
                    x: Math.round(Math.random() * width),
                    y: Math.round(Math.random() * height),
                    width: 10,
                    height: 10,
                    image: './asset/test.png'
                };
            },
            text() {
                return {
                    text: elType == 'text' ? LARGE_TEXT_ZH.substr(
                        Math.round(Math.random() * LARGE_TEXT_ZH.length),
                        6
                    ) : '',
                    x: Math.round(Math.random() * width),
                    y: Math.round(Math.random() * height)
                };
            }
        }

        var t1 = 0;
        var t2 = 0;
        var t3 = 0;
        var zr;
        var isRunning;
        var width;
        var height;
        var round;
        var n;
        var result;
        var total;
        var elType;
        var img = new Image();
        img.src = 'asset/test.png';

        function start() {
            if (isRunning) {
                return;
            }
            isRunning = true;
            document.getElementById('res').innerHTML += 'running ';

            round = document.getElementById('round').value;
            n = document.getElementById('count').value;
            result = [];
            total = 0;
            elType = document.getElementById('shape').value;
            setTimeout(run,50);
        }

        var sList = [
            'circle','sector','ring','ellipse','rect',
            'text','heart','droplet','line','image','star','isogon'
        ];
        var autoIdx = 0;
        var autoRun = false;
        function autoStart() {
            if (isRunning) {
                return;
            }
            autoIdx = 0;
            autoRun = true;
            autoCheck();
        }
        function autoCheck() {
            if (autoRun && autoIdx < sList.length) {
                document.getElementById('shape').value = sList[autoIdx++];
                start();
            }
            else {
                autoRun = false;
                autoIdx = 0;
            }
        }

        function randomColor() {
            var r = Math.round(Math.random() * 255);
            var g = Math.round(Math.random() * 255);
            var b = Math.round(Math.random() * 255);
            return 'rgb(' + [r, g, b].join(',') + ')';
        }

        function run(){
            var ShapeClass = ElClasses[elType];
            var shapeMaker = shapeMakers[elType];
            var styleMaker = styleMakers[elType];
            if (round--) {
                zr.clear();
                var ticket = new Date();
                for (var i = 0; i < n; i++) {
                    zr.add(new ShapeClass({
                        shape: shapeMaker && shapeMaker(),
                        style: styleMaker ? styleMaker() : {
                            fill: 'rgb(' + Math.round(i / n * 255) + ',0,0)'
                        },
                        silent: true
                    }));
                }
                zr.refreshImmediately();
                ticket = new Date() - ticket;
                total += ticket;
                result.push(ticket);
                setTimeout(run,50);
            }else {
                isRunning = false;
                document.getElementById('res').innerHTML +=
                    n + '个' + elType +
                    '平均render时间:' + Math.round(total/result.length)
                    + 'ms : [' + result.join(',') + ']<br/>';
                    console.log(t1, t2, t3); t1 = 0; t2 = 0; t3 = 0;
                autoCheck();
            }
        }
    </script>
</body>
</html>